<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav-bar" @titleClick='titleClick'></detail-nav-bar>
    <Scroll class="detail-scroll" ref="scroll" :propsType="3" @scrollPosition="contentScroll">
      <detail-swipe :top-images="topImages"></detail-swipe>
      <detail-goods-info :goods="goods"></detail-goods-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-info :detailInfo="detailInfo" @imgLoad="imgLoad"></detail-info>
      <detail-param-info ref="params" :paramInfo="paramInfo"></detail-param-info>
      <detail-comment-info ref="comment" :comment-info="commentInfo"></detail-comment-info>
      <goods-list :goods="recomGoodList" ref="recom"></goods-list>
    </Scroll>
    <detail-bottom-bar @addCart="addToCart"></detail-bottom-bar>
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>s
  </div>
</template>

<script>
  import DetailNavBar from "./childComponents/DetailNavBar";
  import {getDetail,Goods,Shop,GoodsParam,getRecommend} from "network/getDetail";
  import DetailSwipe from "./childComponents/DetailSwipe";
  import DetailGoodsInfo from "./childComponents/DetailGoodsInfo";
  import DetailShopInfo from "./childComponents/DetailShopInfo";
  import Scroll from "components/common/scroll/Scroll";
  import DetailInfo from "./childComponents/DetailInfo";
  import DetailParamInfo from "./childComponents/DetailParamInfo";
  import DetailCommentInfo from "./childComponents/DetailCommentInfo";
  import GoodsList from "components/contents/gods/GoodsList";
  import DetailBottomBar from "./childComponents/DetailBottomBar";
  import {backTopMixin} from "common/mixin";
  import {debounce} from "common/utils";

  export default {
    name: "Detail",
    components: {DetailParamInfo,DetailShopInfo, DetailNavBar,DetailSwipe,DetailGoodsInfo,DetailInfo,Scroll,DetailCommentInfo,GoodsList,DetailBottomBar},
    mixins:[backTopMixin],
    data(){
      return {
        iid:null,
        topImages:[],
        goods:{},
        shop:{},
        detailInfo:{},
        paramInfo:{},
        commentInfo:{},
        // 存放offsetTop的值
        themeTopYs:[],
        getThemeTopY:null,
        recomGoodList:[]
      }
    },

    created() {
      this.iid=this.$route.params.id
      // console.log(this.iid)
      // 创建界面时，根据iid请求详情数据
      getDetail(this.iid).then((res)=>{
        const data=res.result;
        // console.log(data)
        // 获取轮播数据
        this.topImages=data.itemInfo.topImages;
        // 获取商品信息
        this.goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services);
        // 创建店铺信息的对象
        this.shop=new Shop(data.shopInfo);
        // 保存商品详情数据
        this.detailInfo=data.detailInfo;
        // 获取商品参数信息
        this.paramInfo=new GoodsParam(data.itemParams.info,data.itemParams.rule);
        // 获取商品的评论信息
        if(data.rate.cRate!==0){
          this.commentInfo=data.rate.list[0];
        }
      });

      // 获取商品推荐信息
      getRecommend().then(res=>{
        this.recomGoodList = res.data.list;
      })

      this.themeTopY=debounce(()=>{
        this.themeTopYs=[];
        this.themeTopYs.push(0);
        this.themeTopYs.push(-this.$refs.params.$el.offsetTop);
        this.themeTopYs.push(-this.$refs.comment.$el.offsetTop);
        this.themeTopYs.push(-this.$refs.recom.$el.offsetTop);
        console.log(this.themeTopYs)
      },200)

    },

    methods:{
      // 添加商品到购物车
      addToCart(){
        // 获取商品（购物车需要展示的信息）信息
        const product={};
        product.img=this.topImages[0];
        product.title=this.goods.title;
        product.desc=this.goods.desc;
        product.price=this.goods.realPrice;
        product.iid=this.iid;
        // console.log(product.iid)
        // 将商品添加到购物车，使用vuex
        // this.$store.commit('addCart',product)
        this.$store.dispatch('addCart',product).then(res=>{
          // 点击后打开弹窗
          this.$alert(res, {
            confirmButtonText: '确定',
            center:true,
            customClass: 'winClass'
          });
          console.log(res)
        });
      },


      imgLoad(){
        this.$refs.scroll.refresh();
        this.getThemeTopY();
      },
      titleClick(index) {
        console.log(this.themeTopYs[index])
        this.$refs.scroll.scrollTo(0,this.themeTopYs[index],200)
      },
      contentScroll(position){
        this.listenShowBackTop(position);

        const positionY = position.y
        for(let i=0;i<this.themeTopYs.length;i++){
          if(this.$refs.detailNavBar.currentIndex !== i)
            if(this.eqThemeTopY(positionY,i)){
              this.$refs.detailNavBar.currentIndex = i
            }
        }
      },
      eqThemeTopY(y,index){
        if(index===this.themeTopYs.length-1)
          return y<=this.themeTopYs[index]
        else
          return y<=this.themeTopYs[index] && y>=this.themeTopYs[index+1]
      },
    },
  }
</script>

<style>
  #detail {
    /*vh是视口高度*/
    height: 100vh;
    position: relative;
  }
  .detail-scroll {
    height: calc(100% - 44px - 49px);
  }
  .detail-nav-bar {
    position: relative;
    z-index: 9;
    background-color: #ffffff;
  }
  .winClass {
    height: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .el-message-box__content {
    font-size: 25px;
  }
</style>
